<template>
  <div id="common_header">
    <div class="common_box">
      <div class="common_header_top">
        <div v-if="vuex_user_login === false">
          <el-link disabled>暂未登录，请选择右侧方式[登录|注册]  </el-link>
          <el-link class="pad-10" href="http://localhost:5000/#/login">
            <i class="fs-15">登录</i>
          </el-link>
          <el-divider direction="vertical"></el-divider>
          <el-link class="pad-10" href="http://localhost:5000/#/register">
            <span class="fs-15">注册</span>
          </el-link>
        </div>
        <div v-if="vuex_user_login === true">
          <el-link class="pad-10" disabled>
            <i class="fs-15 pad-10 color-orange">
              {{this.$store.state.vuex_user_Info.uName}}
            </i>
          </el-link>
          <el-link class="pad-10" href="http://localhost:5000/#/user">
            <i class="fs-20">
              <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" size="small"></el-avatar>
            </i>
          </el-link>
          <el-divider direction="vertical"></el-divider>
          <el-link class="pad-10" href="http://localhost:5000/#/cart">
            <i class="el-icon-shopping-cart-1 fs-20"></i>
          </el-link>
        </div>
      </div>
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
        <el-menu-item index="1" @click="pageJump('/', '1')">
          <el-link >首页</el-link>
        </el-menu-item>
        <el-submenu index="2" @click="pageJump('/cart', '2')">
          <template slot="title">热销产品</template>
          <div style="width: 1520px ;padding: 10px 250px;box-sizing: border-box" >
            <el-row :gutter="20">
              <el-col :span="4" >
                <el-card shadow="hover" style="text-align: center;background: #39b54a">
                  热销产品
                </el-card>
              </el-col>
              <el-col :span="4" @click="IndexToDetail(header_classify_info[0])">
                <el-card shadow="hover" style="text-align: center;background: #e54d42;color: white" >
                  [{{header_classify_info[0].c_img.split('/')[0]}}]
                </el-card>
              </el-col>
              <el-col :span="4" >
                <el-card shadow="hover" style="text-align: center;background: #1cbbb4">
                  [{{header_classify_info[1].c_img.split('/')[0]}}]
                </el-card>
              </el-col>
              <el-col :span="4" >
                <el-card shadow="hover" style="text-align: center;background: #0081ff">
                  [{{header_classify_info[2].c_img.split('/')[0]}}]
                </el-card>
              </el-col>
              <el-col :span="4" >
                <el-card shadow="hover" style="text-align: center;background: #f37b1d">
                  [{{header_classify_info[3].c_img.split('/')[0]}}]
                </el-card>
              </el-col>
              <el-col :span="4" >
                <el-card shadow="hover" style="text-align: center;background: #9c26b0">
                  [{{header_classify_info[4].c_img.split('/')[0]}}]
                </el-card>
              </el-col>
            </el-row>
          </div>
        </el-submenu>
<!--        <el-menu-item index="3" @click="pageJump('/classify', '3')">分类区</el-menu-item>-->
        <el-menu-item index="4" @click="pageJump('/cart', '4')">购物车</el-menu-item>
        <el-menu-item index="5" @click="pageJump('/details','5')" v-if="header_details">商品详情</el-menu-item>
      </el-menu>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  name: 'Header',
  props: {
    'head_index': {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      activeIndex: '0',
      activeIndex2: '1',
      header_classify_info: [], // 页面中用于存放数据的数组
      header_details: [] // 存储商品详细信息
    }
  },
  methods: {
    // 下拉框函数
    handleSelect (key, keyPath) {
      console.log(key, keyPath)
    },
    pageJump (url, number) {
      console.log('页面跳转')
      this.$router.push(url)
    },
    IndexToDetail (obj) {
      console.log(obj)
    }
  },
  computed: {
    ...mapState([
      'vuex_user_login',
      'vuex_user_Info',
      'vuex_user_cart'
    ])
  },
  mounted () {
    this.activeIndex = this.head_index + ''
    // 获取分类的信息
    if (this.$store.state.vuex_user_comm_sort_Info.length === 0) {
      this.$axios.get('/comm/getInfo').then(resp => {
        console.log(resp.data)
        this.$store.state.vuex_user_comm_sort_Info = resp.data.data
        this.header_classify_info = this.$store.state.vuex_user_comm_sort_Info
        console.log(this.header_classify_info)
      }).catch(err => {
        console.log(err)
      })
      console.log('获取数据')
    } else {
      this.header_classify_info = this.$store.state.vuex_user_comm_sort_Info
    }
    this.header_details = this.$store.state.vuex_user_comm
  }
}
</script>

<style lang="less" scoped>
#common_header{
  width: 100%;
  .common_box {
    width: 75%;
    margin: 0 auto;
    /*background: red;*/
    .common_header_top{
      width: 100%;
      height: 35px;
      display: flex;
      align-items: flex-end;
      justify-content: flex-end;
      margin: 0 auto;
    }
  }
}
/*下拉框的样式*/
.el-menu--horizontal>.el-menu-item.is-active {
  border-bottom: 2px solid #409EFF;
  color: white!important;
  background: #409EFF;
}
/*.el-menu--horizontal {*/
/*  border-right: none !important;*/
/*  width: 100% !important;*/
/*}*/
/*.el-menu--horizontal>.el-menu-item {*/
/*  height: 55px !important;*/
/*  line-height: 55px !important;*/
/*}*/
/*.el-submenu__title {*/
/*  height: 55px !important;*/
/*  line-height: 55px !important;*/
/*}*/

/*.el-menu.el-menu--horizontal {*/
/*  height: 55px !important;*/
/*}*/
/*.el-menu--horizontal>.el-submenu {*/
/*  float: left;*/
/*  height: 55px !important;*/
/*  display: flex;*/
/*  align-items: center;*/
/*  justify-content: center;*/
/*}*/
/*.el-menu--horizontal>.el-submenu .el-submenu__title {*/
/*  height: 55px!important;*/
/*  line-height: 55px!important;*/
/*  border-bottom: 2px solid transparent!important;*/
/*  color: #909399!important;*/
/*}*/
</style>
